<template>
  <!-- 中国地图图表 -->
  <div ref="chartDom" class="box-echart"></div>
</template>
<script>
let vm;
import chinaJson from "@/../static/china.json";
import citysJson from "@/../static/citys.json";
export default {
  components: {},
  data() {
    return {
      _chart:null,
      totalData:null,
    };
  },
  methods: {
    loadChart(totalData) {
      this.totalData=totalData;
      if(!this._chart){
        const div = this.$refs["chartDom"];
        this._chart = $echarts.init(div);
        
      }
      if(!$echarts.getMap("china"))
        $echarts.registerMap("china", chinaJson);
      let chart=this._chart;

      let geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028]
      };
      let provinceData = this.getProvinceData(),effectScatterData=[],staticData=[];
      let effectScatterCitys=['上海','北京','广州','成都','杭州','重庆','武汉','西安','南京','长沙','郑州','青岛','沈阳','昆明'];
      for(let kk in geoCoordMap){
        if(effectScatterCitys.includes(kk)){
          staticData.push({ name: kk, value: 5 });
        }
        if(kk=='上海'||kk=='北京'||kk=='广州')
          effectScatterData.push({ name: kk, value: 5 });
      }

      let convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      setOption(chart);
      // 处理点击事件
      chart.on('click', function (params) {
        if(params.seriesName=='chinaProvince'&&params.value==1){
          let provinvceName=params.data.name;
          let province=vm.getProvinceDataByName(provinvceName);
          if(province)
            vm.$emit('selectProvince',province);
        }
      });
      function setOption(chart) {
        let option = {
          title: {
            show: false,
            text: "校区地理分布",
            left: "center",
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {
            // trigger: "item",
            textStyle: {
              color: "white"
            },
            formatter: function(params) {
                let data=vm.getDataByProvinceName(params.name);
                if(data.schoolData==0&&data.incomeData==0&&data.consumeData==0&&
                data.clueData==0&&data.studentData==0&&data.classData==0&&data.teacherData==0)
                  return '';
                var tipHtml = `<div class="wp-map-tooltip">
                  <span class="title">${params.name}</span>
                  <span class="label">校区数量：<span class="number">${data.schoolData}</span></span>
                  <span class="label">总预收款：<span class="number">${data.incomeData}</span></span>
                  <span class="label">总课消：<span class="number">${data.consumeData}</span></span>
                  <span class="label">线索数：<span class="number">${data.clueData}</span></span>
                  <span class="label">学员数：<span class="number">${data.studentData}</span></span>
                  <span class="label">班级数：<span class="number">${data.classData}</span></span>
                  <span class="label">教师数：<span class="number">${data.teacherData}</span></span>
                <div>`;
                return tipHtml;
            }
          },
          geo: {
            map: "china",
            zlevel: 1,
            zoom:1.2,
            label: {
              emphasis: {
                show: false
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "rgba(123,172,239,1)",
                borderColor: "rgb(221,225,228)",
                borderWidth: 0.01*rem
              },
              emphasis: {
                areaColor: "rgba(123,172,239,0.5)",
                borderWidth: 0.01*rem
              }
            }
          },
          series: [
            {
              name: "city",
              type: "scatter",
              zlevel: 3,
              coordinateSystem: "geo",
              data: convertData(staticData),
              symbolSize: 3,
              label: {
                show: true,
                position: "right",
                formatter: "{b}",
                color: "#333333",
                fontSize: 0.12*rem
              },
              itemStyle: {
               normal: {
                  color: '#214484',
                }
              },
              silent:true,
            },
            {
              name: "cityTop",
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 3,
              showEffectOn: 'render',
              rippleEffect: {
                  brushType: 'stroke',
                  period:5,
                  scale:3.5
              },
              label: {
                show: true,
                position: "right",
                formatter: "{b}",
                color: "#333333",
                fontSize: 0.12*rem
              },
              symbolSize: function (val) {
                  return val[2];
              },
              itemStyle: {
                normal: {
                  // color: "rgb(237,101,59)"
                  color: 'purple',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              data: convertData(effectScatterData),
              silent:true,
            },
            {
              name:'chinaProvince',
              type: 'map',
              map: "china",
              geoIndex: 0,
              zlevel: 2,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                  normal: {
                      show: true
                  },
                  emphasis: {
                      show: false,
                      textStyle: {
                          color: '#fff'
                      }
                  }
              },
              roam: true,
              animation: false,
              data: provinceData
            },
          ]
        };
        chart.setOption(option);
      }
    },
    getProvinceData(){
      let provinceData = [];
      for(let i=0;i<citysJson.length;i++){
        let d=this.getDataByProvinceId(citysJson[i].value);
        if(d.schoolData==0&&d.incomeData==0&&d.consumeData==0&&
          d.clueData==0&&d.studentData==0&&d.classData==0&&d.teacherData==0){
          provinceData.push({
            name:citysJson[i].label,
            value:0,
            itemStyle: {
             normal: {
                areaColor: "#dee1e4",
                color:'#dee1e4',
                borderColor: "rgb(221,225,228)",
                borderWidth: 0.01*rem
              },
              emphasis: {
                areaColor: "#dee1e4",
                color:'#dee1e4',
                borderWidth: 0.01*rem
              }
            }
          });
        }
        else{
          provinceData.push({
            name:citysJson[i].label,
            value:1,
            itemStyle: {
              normal: {
                areaColor: "rgb(123,172,239)",
                color:'rgb(123,172,239)',
                borderColor: "rgb(221,225,228)",
                borderWidth: 0.01*rem
              },
              emphasis: {
                areaColor: "rgba(123,172,239,0.5)",
                color:'rgba(123,172,239,0.5)',
                borderWidth: 0.01*rem
              }
            }
          });
        }
      }
      return provinceData;
    },
    getDataByProvinceName(name){
      let result= {
        schoolData:0,
        incomeData:0,
        consumeData:0,
        clueData:0,
        studentData:0,
        classData:0,
        teacherData:0,
      };
      if(!this.totalData)return result;
      let provinceId=this.getProvinceByName(name);
      if(!provinceId)return result;
      for(let ele in this.totalData){
        let list=this.totalData[ele];
        for(let i=0;i<list.length;i++){
          if(list[i].province==provinceId){
            result[ele]=list[i].totalValue||0;
            break;
          }
        }
      };
      
      return result;
    },
    getDataByProvinceId(provinceId){
      let result= {
        schoolData:0,
        incomeData:0,
        consumeData:0,
        clueData:0,
        studentData:0,
        classData:0,
        teacherData:0,
      };
      if(!this.totalData)return result;
      // let provinceId=this.getProvinceByName(name);
      if(!provinceId)return result;
      for(let ele in this.totalData){
        let list=this.totalData[ele];
        for(let i=0;i<list.length;i++){
          if(list[i].province==provinceId){
            result[ele]=list[i].totalValue||0;
            break;
          }
        }
      };
      
      return result;
    },
    /**通过省份id获取省份数据 */
    getProvinceById(id){
      let length=citysJson.length;
      for(let i=0;i<length;i++){
        if(citysJson[i].value==id){
          return citysJson[i];
        }
      }
    },
    getProvinceByName(name){
      let length=citysJson.length;
      for(let i=0;i<length;i++){
        if(citysJson[i].label==name){
          return citysJson[i].value;
        }
      }
      return null;
    },
    getProvinceDataByName(name){
      let length=citysJson.length;
      for(let i=0;i<length;i++){
        if(citysJson[i].label==name){
          return citysJson[i];
        }
      }
      return null;
    },
  },
  mounted() {
    vm = this;
    // this.loadChart();
  },
  computed: {},
  watch: {}
};
</script>
<style lang="scss" scoped>
.box-echart {
  width: 100%;
  height: 100%;
}

</style>
<style lang="scss" >
  .wp-map-tooltip{
    min-width: 2rem;
    font-size: 0.14rem;
    height: auto;
    .title{
      display: block;
      font-size: 0.16rem;
      font-weight: bold;
      width: 100%;
    }
    .label{
      display: block;
      padding-left: 0.08rem;
      width: 100%;
      .number{
        // color: cyan;
        font-weight: bold;
      }
      

    }
  }
</style>
